<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>轮播</title>
    <style>
        .slide-wrapper {
            position: relative;
            width: 600px;
            height: 200px;
        }

        .slide {
            width: 100%;
            height: 100%;
            display: flex;
            scroll-behavior: smooth;
            overflow: hidden;
            border-radius: 8px;
            /* 通过监听动画来控制轮播，相比于定时器的好处是可以通过css控制播放和停止 */
            animation: scroll 5s infinite;
        }

        .slide:hover {
            /* 鼠标放上去时停止轮播 */
            animation-play-state: paused;
        }

        @keyframes scroll {
            to {
                opacity: 1;
            }
        }

        .slide-item {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            align-content: center;
        }

        .slide-btn {
            border: none;
            height: 28px;
            width: 24px;
            background-color: rgba(255, 255, 255, .1);
            position: absolute;
            top: calc(50% - 14px);
            align-items: center;
            justify-content: center;
            display: flex;
            border-radius: 8px;
            z-index: 2;
        }

        .slide-btn:hover {
            background-color: rgba(255, 255, 255, .4);
        }

        .pre {
            transform: rotate(180deg);
            left: 0;
        }

        .next {
            right: 0;
        }

        .indicator {
            list-style: none;
            display: inline-flex;
            gap: 4px;
            justify-content: center;
            padding: 0;
            margin: 0;
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translate(-50%);
            z-index: 2;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, .4);
        }

        .dot.active {
            background-color: rgba(255, 255, 255, 1);
        }
    </style>
</head>

<body>
    <div class="slide-wrapper">
        <div class="slide">
            <div class="slide-item" style="background-color: burlywood;">item 1</div>
            <div class="slide-item" style="background-color:brown;">item 2</div>
            <div class="slide-item" style="background-color: cadetblue;">item 3</div>
            <div class="slide-item" style="background-color: darkgreen;">item 4</div>
        </div>
        <button class="slide-btn pre">
            <svg viewBox="0 0 1024 1024">
                <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067" stroke="#fff"
                    d="m341.333 170.667 341.334 341.332-341.334 341.335">
                </path>
            </svg>
        </button>
        <button class="slide-btn next">
            <svg viewBox="0 0 1024 1024">
                <path fill="none" stroke-linejoin="round" stroke-linecap="round" stroke-width="145.067" stroke="#fff"
                    d="m341.333 170.667 341.334 341.332-341.334 341.335">
                </path>
            </svg>
        </button>
        <ul class="indicator">
            <li class="dot active"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
    </div>
    </div>
    <div style="text-align: center;">
    </div>
    <script type="text/javascript">
        let slide = document.querySelector('.slide');
        let nextBtn = document.querySelector('.next');
        let preBtn = document.querySelector('.pre');
        slide.count = slide.children.length;
        slide.index = 0;
        nextBtn.onclick = nextSlide;
        preBtn.onclick = preSlide;
        let dots = document.querySelectorAll('.dot');
        dots.forEach((ele, i) => {
            ele.addEventListener('click', e => {
                slide.index = i;
                setCurrentSlide();
            })
        });

        function setCurrentSlide() {
            slide.scrollTo(slide.index * slide.offsetWidth, 0)
            for (let i = 0; i < slide.count; i++) {
                if (dots[i].classList.contains('active')) {
                    dots[i].classList.remove('active');
                    break
                }
            }
            dots[slide.index].classList.add('active');
        }

        function preSlide() {
            slide.index--;
            if (slide.index < 0)
                slide.index = slide.count - 1;
            setCurrentSlide();
        }

        function nextSlide() {
            slide.index++;
            if (slide.index >= slide.count)
                slide.index = 0;
            setCurrentSlide();
        }

        // 自动轮播
        slide.addEventListener('animationiteration', e => {
            nextSlide()
        })

        // let timer = setInterval(() => {
        //     nextSlide();
        // }, 6000)

        // slides.addEventListener('mouseover', (e) => {
        //     clearInterval(timer)
        // })

        // slides.addEventListener('mouseout', (e) => {
        //     timer = setInterval(() => {
        //         nextSlide();
        //     }, 6000)
        // })

    </script>
</body>

</html>